﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bos管理首页</title>
		<!--<load href="__PUBLIC__/static/css/pintuer.css" />-->
		<!--<load href="__PUBLIC__/static/js/pintuer.js" />-->
		<link rel="stylesheet" type="text/css" href="../simamg/Public/static/css/pintuer.css">
        <!--<link rel="stylesheet" type="text/css" href="../Static/css/pintuer.css">-->
        <!--<link rel="stylesheet" type="text/css" href="../../../../../SimaMG/Public/static/css/pintuer.css">-->
        <script src="../../../../../SimaMG/Public/static/js/jquery.js"></script>
	</head>
	<style>
		.header{width: 100%;height: 50px;}
        .nav-m{padding: 0px;margin: 0px;width: 100px; margin-top: 30px}
        .nav-m li{float: left;width: 100%; margin-bottom: 20px; text-align: center; list-style: none}
        .nav-m li span{color: #fff;font-size: 31px;line-height: 46px;width: 46px; height: 46px}
        .nav-m li div{width: 52px;height: 52px; background-color: #424E62;border-radius:6px;margin-left:auto;margin-right: auto;cursor:pointer;margin-bottom: 5px;padding-top: 5px;}
        .nav-m li div:hover{background-color: #22282E}
        .nav-m li>.set{background-color: #ff9900}
        .nav-m li>.set:hover{background-color: #ff9900}
        .nav-m li> span{ color: #A5BAC6; font-size:1.1em; font-weight: bolder; letter-spacing:1px; width: 46px;height: 46px;margin-left:auto;margin-right: auto;line-height: 24px;}
        .nav-t{padding: 0px;margin: 0px;width: 100%;}
        .nav-t li {float: left;width: 100%;list-style: none}
        .nav-t li a{font-size:1.1em;width: 100%;height: 50px;line-height: 50px; padding-left: 30px; float: left}
        .nav-t li a:hover{background-color:#EAF3FE;color: #333}
        .nav-t li>.set{background-color: #fff}
	</style>
	<body>

	<div class="cont" style="width: 100%;height:100%; position: absolute;">
		<div class="left" style="height: 100%;width: 300px;float:left;background-color: #232323;position:fixed;">
			<div class="left-l" style="width: 100px; float: left; height:100%;background-color: #293038">
                <div style="width: 100px;height: 60px; line-height:60px;text-align:center;background-color: #22282E; ">
                    <span style="color: #fff;font-weight:900;font-size: 20px">Sima</span>
                </div>
                <ul class="nav-m">
                    <foreach name="menu" item="vo" >
                        <li>
                            <div data-id="{$vo.id}" class='<if condition="($vo.Select eq 1)">set</if>'>
                                <span class="{$vo.icon}"></span>
                            </div>
                            <span data-id="{$vo.id}">{$vo.title}</span>
                        </li>
                    </foreach>
                </ul>
			</div>
			<div class="left-r bg" style="width: 200px; float:right;height:100%;">
                <div style="width: 100%;height: 60px; background-color: #8899AD">
                    <span class="icon-arrow-circle-o-right" style="line-height: 60px;margin-left: 20px;font-size:1.5em;"> 首页</span>
                </div>
                <ul class="nav-t">
                    <li><a href="#">加载菜单中...</a></li>
                </ul>
			</div>
		</div>
		<div class="right" style="width:auto; left:300px; bottom:0px;right:0px; top:0px;position: absolute; overflow-x: hidden;overflow-y: hidden;">
		<iframe id="iframe" src="{:U('admin/index/main')}" width="100%" height="100%" ></iframe>
		</div>
	</div>
	</body>
    <script>
        $(document).ready(function(){

            getSubMenu(1);

            $(".nav-m li div").on("click", function(){
                var id=$(this).data("id");
                var title=$(this).next().text();
                $(".nav-m li div").removeClass('set');
                $(this).addClass('set');
                $(".left-r div span").text(' '+title);
                getSubMenu(id);
            });

            $(document).on('click', '.nav-t li a', function(event) {
                event.preventDefault();
                var url=$(this).attr('id');
                openSubMenu(url);
            });


            function getSubMenu(fid){
                $.get("{:U('admin/index/getSubMenu','','')}", { fid: fid},
                        function(data){
                            $(".nav-t").empty();
                            var array = eval(data);
                            for(var i=0;i<data.length;i++){
                                $(".nav-t").append('<li><a id="sm_'+data[i].id+'" data-id="'+data[i].id+'" href="'+data[i].url+'">'+data[i].title+'</a></li>');
                            }
                            openSubMenu('sm_1');
                 });
            }

            function openSubMenu(id){
                $('.nav-t li a').removeClass('set');
                $("#"+id).addClass('set');
                var url= $("#"+id).attr('href');
                if(url!=="#" && url!=""){
                    document.getElementById('iframe').src=url;
                }
            }


        })
    </script>
</html>
